<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   
  
</head>

<style>
    *{
        margin:0;
        padding:0;
    }
    #box{
        margin: 0 auto;
        width:1284px;
        height:738px;
        background: url(images/bg.jpg);
    }
    #main{
        margin: 0 auto;
        position:relative;
        width:599px;
    }
    header{
        width:100%;
        height: 132px;
        margin: 0 auto;
    }
    nav{
        height:22px;
        width:100%;
    }
    nav ul{
        height:22px;
        background: #8ebbff;
    }
    nav ul li{
        list-style: none;
        display:inline-block;
        font-size:12px;
        margin-right:43px;
        padding:4px 0px;
    }
    .nav_left{
        margin-left:17px;
    }
    .nav_right{
        margin-right:26px;
    }
    aside{
        display: inline-block;
        width:150px;
        height:584px;
        background:#d2e7ff
    }
    aside img{
        margin-top:20px;
    }
    aside ul{
        
        width:100%;
        height:583px;
    }
    aside ul li{
        font-size:12px;
        list-style:none;
        text-align: center;
    }
    .txtbody{
        margin-top:20px;
        padding:0 15px;
        text-align: left;
    }
    #right{
       
        padding-left:30px;
        position:absolute;
        display: inline-block;
        background: url(images/big.jpg);
        width:420px;
        height:583px;
        line-height: 14px;
        
    }
    #right ul li{
        list-style: none;
        color:#147a9b;
    }
    #right ul li div{
       margin-top:35px;
        margin-bottom:20px;
        font-size: 18px;
        text-decoration:underline #147a96;
    }
    .sec_one{
        margin-top:30px;
    }
    #right ul li p{
        width:395px;
        font-size:12px;
        color:#000;
        font-weight:500;
    }
</style>
<body>
    <div id="box">
            
            <div id="main">
                <!--头部背景-->
                 <header><img src="images/a.jpg"></header>

                <!--导航-->
                <nav>
                    <ul>
                        <li class="nav_left">首页</li>
                        <li>心情日记</li>
                        <li>Free</li>
                        <li>一起走到</li>
                        <li>从明天起</li>
                        <li>纸飞机</li>
                        <li class="nav_right">下一站</li>
                    </ul>
                </nav>

                <!--左边栏-->
                <aside>
                        <ul>
                            <li>
                                <img src="images/3.jpg">
                                <p class="txthead">我的笔记本</p>
                                <p class="txtbody">我们彼此深信，是瞬间并发的热情让他们相遇。这样的确定是美丽的，但变换无常更为美丽</p>
                            </li>

                            <li>
                                <img src="images/4.jpg">
                                <p class="txthead">心情轨迹</p>
                                <P class="txtbody">董事长的一切都让人既羡慕又妒忌，但更让人受不了的是，有一天，上苍突然赐给他一个神奇的礼物</P>
                            </li>
                        </ul>
                </aside>
                <!--右边-->
                <div id="right">
                        <ul>
                            <li>
                                <div class="sec_one">介绍</div>
                                <p>我努力的捉紧世界，最后却仍被世界淘汰，如果一开始就松手，我会不那么伤心吗？你说，亲爱的孩子，世事难料，随它去吧</p>
                            </li>

                            <li>
                                    <div>照相本子</div>
                                    <p>关于童年，你记住了什么？<br>
                                       两岁时，我拥有一只巨大的粉红猪，它总在我嚎啕大哭时逗我笑。<br>
                                       三岁时，我骑着小木马一路摇到娃娃i婆家，它不喝水也不吃草。<br>
                                       四岁时，我离家出走，在公车上睡着了，最后是太空超人送我回家<br>
                                       我真的没骗你，我统统都记得，还有照片为证。
                                    </p>
                            </li>

                            <li>
                                    <div>地下铁</div>
                                    <p>天使在地下铁的入口，<br>
                                       和我说再见的那一年，<br>
                                       我渐渐看不见了。<br>
                                       十五岁生日的那年秋天早晨<br>
                                       窗外下着毛毛雨<br>
                                       我喂好我的猫<br>
                                       六点零五分<br>
                                       我走进地下铁<br>
                                    </p>
                            </li>

                            <li>
                                    <div>向左走向右走</div>
                                    <p>They're both convinced<br>
                                       that a sudden passion join them<br>
                                       Such certainth is beautiful,<br>
                                       but uncertainty is more beautiful still.
                                    </p>
                            </li>
                        </ul>
                </div>
            </div>


    </div>
</body>

<script>


</script>
